<!--
author: 何其沆(pooky)
desc: 季度列表
date: 2021-11-18
-->
<template>
  <div class="statistics-table-right">
    <columnItem title="Quarterly Tasks" :data="qData[0]" />
    <div class="right-item">
      <div class="right-item-top">
        <div v-if="qm === 'Q1'">Jan</div>
        <div v-if="qm === 'Q2'">Apr</div>
        <div v-if="qm === 'Q3'">Jul</div>
        <div v-if="qm === 'Q4'">Oct</div>
        <!--        <div>Quarter</div>-->
      </div>
      <div class="right-item-content">
        <div v-if="qData[3]" class="item">{{ qData[3][0] === null ? '-' : qData[3][0] }}</div>
        <div v-if="qData[3]" class="item">{{ qData[3][1] === null ? '-' : qData[3][1] }}</div>
        <div v-if="qData[3]" class="item">{{ qData[3][2] === null ? '-' : qData[3][2] }}</div>
        <div v-if="qData[3]" class="item">{{ qData[3][3] === null ? '-' : qData[3][3] }}</div>
        <div v-if="qData[3]" class="item">{{ qData[3][4] === null ? '-' : qData[3][4] }}</div>
        <div v-if="qData[3]" class="item">{{ qData[3][5] === null ? '-' : qData[3][5] }}</div>
        <div v-if="qData[3]" class="item">{{ qData[3][6] === null ? '-' : qData[3][6] }}</div>
        <div v-if="qData.length === 0">
          <div class="item">-</div>
          <div class="item">-</div>
          <div class="item">-</div>
          <div class="item">-</div>
          <div class="item">-</div>
          <div class="item">-</div>
          <div class="item">-</div>
        </div>
      </div>
    </div>
    <div class="right-item">
      <div class="right-item-top">
        <div v-if="qm === 'Q1'">Jan(%)</div>
        <div v-if="qm === 'Q2'">Apr(%)</div>
        <div v-if="qm === 'Q3'">Jul(%)</div>
        <div v-if="qm === 'Q4'">Oct(%)</div>
        <!--        <div>Completion</div>-->
      </div>
      <div class="right-item-content">
        <div v-if="qData[4]" class="item" :style="changeColor(qData[4][0])">
          {{ qData[4][0] === null ? '-' : qData[4][0] }}
        </div>
        <div v-if="qData[4]" class="item" :style="changeColor(qData[4][1])">
          {{ qData[4][1] === null ? '-' : qData[4][1] }}
        </div>
        <div v-if="qData[4]" class="item" :style="changeColor(qData[4][2])">
          {{ qData[4][2] === null ? '-' : qData[4][2] }}
        </div>
        <div v-if="qData[4]" class="item" :style="changeColor(qData[4][3])">
          {{ qData[4][3] === null ? '-' : qData[4][3] }}
        </div>
        <div v-if="qData[4]" class="item" :style="changeColor(qData[4][4])">
          {{ qData[4][4] === null ? '-' : qData[4][4] }}
        </div>
        <div v-if="qData[4]" class="item" :style="changeColor(qData[4][5])">
          {{ qData[4][5] === null ? '-' : qData[4][5] }}
        </div>
        <div v-if="qData[4]" class="item" :style="changeColor(qData[4][6])">
          {{ qData[4][6] === null ? '-' : qData[4][6] }}
        </div>
        <div v-if="qData.length === 0">
          <div class="item">-</div>
          <div class="item">-</div>
          <div class="item">-</div>
          <div class="item">-</div>
          <div class="item">-</div>
          <div class="item">-</div>
          <div class="item">-</div>
        </div>
      </div>
    </div>
    <div class="right-item">
      <div class="right-item-top">
        <div v-if="qm === 'Q1'">Feb</div>
        <div v-if="qm === 'Q2'">May</div>
        <div v-if="qm === 'Q3'">Aug</div>
        <div v-if="qm === 'Q4'">Nov</div>
        <!--        <div>Quarter</div>-->
      </div>
      <div class="right-item-content">
        <div v-if="qData[5]" class="item">{{ qData[5][0] === null ? '-' : qData[5][0] }}</div>
        <div v-if="qData[5]" class="item">{{ qData[5][1] === null ? '-' : qData[5][1] }}</div>
        <div v-if="qData[5]" class="item">{{ qData[5][2] === null ? '-' : qData[5][2] }}</div>
        <div v-if="qData[5]" class="item">{{ qData[5][3] === null ? '-' : qData[5][3] }}</div>
        <div v-if="qData[5]" class="item">{{ qData[5][4] === null ? '-' : qData[5][4] }}</div>
        <div v-if="qData[5]" class="item">{{ qData[5][5] === null ? '-' : qData[5][5] }}</div>
        <div v-if="qData[5]" class="item">{{ qData[5][6] === null ? '-' : qData[5][6] }}</div>
        <div v-if="qData.length === 0">
          <div class="item">-</div>
          <div class="item">-</div>
          <div class="item">-</div>
          <div class="item">-</div>
          <div class="item">-</div>
          <div class="item">-</div>
          <div class="item">-</div>
        </div>
      </div>
    </div>
    <div class="right-item">
      <div class="right-item-top">
        <div v-if="qm === 'Q1'">Feb(%)</div>
        <div v-if="qm === 'Q2'">May(%)</div>
        <div v-if="qm === 'Q3'">Aug(%)</div>
        <div v-if="qm === 'Q4'">Nov(%)</div>
        <!--        <div>Completion</div>-->
      </div>
      <div class="right-item-content">
        <div v-if="qData[6]" class="item" :style="changeColor(qData[6][0])">
          {{ qData[6][0] === null ? '-' : qData[6][0] }}
        </div>
        <div v-if="qData[6]" class="item" :style="changeColor(qData[6][1])">
          {{ qData[6][1] === null ? '-' : qData[6][1] }}
        </div>
        <div v-if="qData[6]" class="item" :style="changeColor(qData[6][2])">
          {{ qData[6][2] === null ? '-' : qData[6][2] }}
        </div>
        <div v-if="qData[6]" class="item" :style="changeColor(qData[6][3])">
          {{ qData[6][3] === null ? '-' : qData[6][3] }}
        </div>
        <div v-if="qData[6]" class="item" :style="changeColor(qData[6][4])">
          {{ qData[6][4] === null ? '-' : qData[6][4] }}
        </div>
        <div v-if="qData[6]" class="item" :style="changeColor(qData[6][5])">
          {{ qData[6][5] === null ? '-' : qData[6][5] }}
        </div>
        <div v-if="qData[6]" class="item" :style="changeColor(qData[6][6])">
          {{ qData[6][6] === null ? '-' : qData[6][6] }}
        </div>
        <div v-if="qData.length === 0">
          <div class="item">-</div>
          <div class="item">-</div>
          <div class="item">-</div>
          <div class="item">-</div>
          <div class="item">-</div>
          <div class="item">-</div>
          <div class="item">-</div>
        </div>
      </div>
    </div>
    <div class="right-item">
      <div class="right-item-top">
        <div v-if="qm === 'Q1'">Mar</div>
        <div v-if="qm === 'Q2'">Jun</div>
        <div v-if="qm === 'Q3'">Sep</div>
        <div v-if="qm === 'Q4'">Dec</div>
        <!--        <div>Quarter</div>-->
      </div>
      <div class="right-item-content">
        <div v-if="qData[7]" class="item">{{ qData[7][0] === null ? '-' : qData[7][0] }}</div>
        <div v-if="qData[7]" class="item">{{ qData[7][1] === null ? '-' : qData[7][1] }}</div>
        <div v-if="qData[7]" class="item">{{ qData[7][2] === null ? '-' : qData[7][2] }}</div>
        <div v-if="qData[7]" class="item">{{ qData[7][3] === null ? '-' : qData[7][3] }}</div>
        <div v-if="qData[7]" class="item">{{ qData[7][4] === null ? '-' : qData[7][4] }}</div>
        <div v-if="qData[7]" class="item">{{ qData[7][5] === null ? '-' : qData[7][5] }}</div>
        <div v-if="qData[7]" class="item">{{ qData[7][6] === null ? '-' : qData[7][6] }}</div>
        <div v-if="qData.length === 0">
          <div class="item">-</div>
          <div class="item">-</div>
          <div class="item">-</div>
          <div class="item">-</div>
          <div class="item">-</div>
          <div class="item">-</div>
          <div class="item">-</div>
        </div>
      </div>
    </div>
    <div class="right-item">
      <div class="right-item-top">
        <div v-if="qm === 'Q1'">Mar(%)</div>
        <div v-if="qm === 'Q2'">Jun(%)</div>
        <div v-if="qm === 'Q3'">Sep(%)</div>
        <div v-if="qm === 'Q4'">Dec(%)</div>
        <!--        <div>Completion</div>-->
      </div>
      <div class="right-item-content">
        <div v-if="qData[8]" class="item" :style="changeColor(qData[8][0])">
          {{ qData[8][0] === null ? '-' : qData[8][0] }}
        </div>
        <div v-if="qData[8]" class="item" :style="changeColor(qData[8][1])">
          {{ qData[8][1] === null ? '-' : qData[8][1] }}
        </div>
        <div v-if="qData[8]" class="item" :style="changeColor(qData[8][2])">
          {{ qData[8][2] === null ? '-' : qData[8][2] }}
        </div>
        <div v-if="qData[8]" class="item" :style="changeColor(qData[8][3])">
          {{ qData[8][3] === null ? '-' : qData[8][3] }}
        </div>
        <div v-if="qData[8]" class="item" :style="changeColor(qData[8][4])">
          {{ qData[8][4] === null ? '-' : qData[8][4] }}
        </div>
        <div v-if="qData[8]" class="item" :style="changeColor(qData[8][5])">
          {{ qData[8][5] === null ? '-' : qData[8][5] }}
        </div>
        <div v-if="qData[8]" class="item" :style="changeColor(qData[8][6])">
          {{ qData[8][6] === null ? '-' : qData[8][6] }}
        </div>
        <div v-if="qData.length === 0">
          <div class="item">-</div>
          <div class="item">-</div>
          <div class="item">-</div>
          <div class="item">-</div>
          <div class="item">-</div>
          <div class="item">-</div>
          <div class="item">-</div>
        </div>
      </div>
    </div>
    <columnItem title="Quarterly Total" :data="qData[1]" />
    <columnItem title="Quarterly Total(%)" :data="qData[2]" />
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useStore } from 'vuex'
import columnItem from './columnItem.vue'

const store = useStore()
const qData = ref([])

defineProps({
  qm: String
})
/**
 * 获取季度数据
 * @type {ComputedRef<[]|*>}
 */
const quarterData = ref(
  computed(() => {
    return store.state.pm.quarterData
  })
)
/**
 * 换颜色
 */
const changeColor = val => {
  return {
    color: parseFloat(val) >= 100 ? 'green' : 'red'
  }
}
/**
 * 监听数据变化
 */
watch(
  quarterData,
  newValue => {
    const a1 = []
    const a2 = []
    const a3 = []
    const a4 = []
    const a5 = []
    const a6 = []
    const a7 = []
    const a8 = []
    const a9 = []
    qData.value = []
    if (newValue.data.phaseData) {
      for (let i = 0; i < newValue.data.phaseData.length; i++) {
        const res = newValue.data.phaseData[i]
        a1.push(res.tasks)
        a2.push(res.total)
        a3.push(res.totalCompletion)
        for (let j = 0; j < res.phaseResultData.length; j++) {
          const name = res.phaseResultData[j].name
          if (name === 'Jan' || name === 'Apr' || name === 'Jul' || name === 'Oct') {
            a4.push(res.phaseResultData[j].result)
            a5.push(res.phaseResultData[j].completion)
          } else if (name === 'Feb' || name === 'May' || name === 'Aug' || name === 'Nov') {
            a6.push(res.phaseResultData[j].result)
            a7.push(res.phaseResultData[j].completion)
          } else if (name === 'Mar' || name === 'Jun' || name === 'Sep' || name === 'Dec') {
            a8.push(res.phaseResultData[j].result)
            a9.push(res.phaseResultData[j].completion)
          }
        }
      }
    }
    qData.value.push(a1)
    qData.value.push(a2)
    qData.value.push(a3)
    qData.value.push(a4)
    qData.value.push(a5)
    qData.value.push(a6)
    qData.value.push(a7)
    qData.value.push(a8)
    qData.value.push(a9)
  },
  {
    deep: true
  }
)
</script>

<style scoped lang="less">
@import './common.less';
</style>
